<script setup>
import { reactive,ref, onMounted, onUnmounted } from 'vue'
import request from '@/utils/request.js'
import * as echarts from 'echarts/core';
import {vue3ScrollSeamless} from "vue3-scroll-seamless";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { BarChart } from 'echarts/charts';
echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  MarkLineComponent,
  MarkPointComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
  BarChart
]);

const newDate = ref('')
const weather = ref({})
const timer = ref()
const wea = ref()// 用来取得天气循环的对象，方便销毁
const nowInChild = ref(0)
const preInChild = ref(0)
const currentBorrow = ref(0)
const yesterdayBorrow = ref(0)

const newBook1 = ref([])
const newBook2 = ref([])

// 从后台取出数据
const getData = async () => {
  await request({
    method: 'get',
    url: '/wisdom/getData',
  }).then(response => {
    console.log(response.data)
    if (response.data.flag) {
      weather.value = response.data.data.weather;
      nowInChild.value = response.data.data.nowInChild
      preInChild.value = response.data.data.preInChild
      currentBorrow.value = response.data.data.currentBorrow
      yesterdayBorrow.value = response.data.data.yesterdayBorrow

      newBook1.value = response.data.data.newBook1
      newBook2.value = response.data.data.newBook2
      console.log(response.data.data)
      var myChart = echarts.init(document.getElementById('main'));
      let option = {
        title: {
          text: '进馆数据'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['今日进馆', '昨日进馆']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     saveAsImage: {}
        //   }
        // },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: response.data.data.hours2//['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            itemStyle: {
              color: '#CDE985'
            },
            name: '昨日进馆',
            type: 'line',
            // stack: 'Total',
            data: response.data.data.listNumberYesterday//[320, 332, 301, 334, 390, 330, 320]
          },
          {
            itemStyle: {
              color: '#FF7200'
            },
            name: '今日进馆',
            type: 'line',
            // stack: 'Total',
            data: response.data.data.listNumber
            //[820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };
      myChart.setOption(option);

      var myChart2 = echarts.init(document.getElementById('main2'));
      myChart2.setOption({
        color: ['#FF7200', '#CDE985'],
        title: {
          text: '顺德图书馆借阅数据统计',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {},
        xAxis: {
          data: response.data.data.hours,
          // type: 'value',
          // boundaryGap: [0, 0.01]
          //// 这是下面的标识
        },
        yAxis: {},
        series: [
          {
            name: '今日借书',
            type: 'bar',
            data: response.data.data.borrow.todayList,// 这是真正的数量
            itemStyle: {
              normal: {
                label: {
                  formatter: "{c}" + "本",
                  show: false,
                  position: "top",
                }
              }
            }
          },
          {
            name: '昨日借书',
            type: 'bar',
            data: response.data.data.borrow.yesterdayList,// 这是真正的数量
            itemStyle: {
              normal: {
                label: {
                  formatter: "{c}" + "本",
                  show: false,
                  position: "top",
                }
              }
            }
          }

        ]
      });
    }
  });
}
onMounted(() => {
  getData();// 打开时提取数据
  // 每2分钟取一次数据
  // wea.value = setInterval(getData, 120000)
  timer.value = setInterval(function () {
    dateFormat();
  }, 10000)
})
//在页面销毁之前先销毁定时器
onUnmounted(() => {
  clearTimeout(timer.value)
  timer.value = ""

  // clearTimeout(wea.value)
  // wea.value = ""
})

const dateTimeMap = ref('')
const dateFormat = async () => {

  await request({
    method: 'get',
    url: '/wisdom/correctTime',
  }).then(response => {
    console.log(response.data)
    if (response.data.flag) {
      console.log(response.data.data.year)
      var year = response.data.data.year
      var month = response.data.data.month
      var day = response.data.data.day < 10 ? '0' + response.data.data.day : response.data.data.day
      var hours = response.data.data.hour < 10 ?  '0' + response.data.data.hour : response.data.data.hour
      var minutes = response.data.data.minute < 10 ? '0' + response.data.data.minute : response.data.data.minute
      var seconds = response.data.data.second < 10 ? '0' + response.data.data.second : response.data.data.second
      var week = response.data.data.week
      dateTimeMap.value = year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + week
    }
  })

  // var date = new Date()
  // var year = date.getFullYear()
  //
  // //  在日期格式中，月份是从0开始的
  // //   使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
  //
  // var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
  // var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  // var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
  // var minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  // var seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  // let week = date.getDay() // 星期
  // let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
  // // 拼接 时间格式处理
  // return year + '年' + month + '月' + day + '日 ' + hours + ':' + minutes + ':' + seconds + ' ' + weekArr[week]
}

const classOptions = {
  limitMoveNum: 6,
  step:0.4
};
</script>

<template>
  <div class="root">
    <div class="weather">
      <div class="time">
        <div>{{ dateTimeMap }}</div>
      </div>
      <div class="time2">
        <!-- {{ weather.city }} 天气:<span v-text="weather.weather"></span> 温度:<span
          v-text="weather.temperature"></span>℃ 湿度:<span v-text="weather.moisture"></span>% 风向:<span
          v-text="weather.windDirection"></span> 风力:<span v-text="weather.windPower"></span> -->
      </div>
    </div>
    <div class="title">
      <span>顺德少年儿童图书馆 9:00 ~ 17:00</span>
    </div>

    <div class="in">
      <div id="main" class="main"></div>

    </div>

    <div class="menu">
      <span v-text="nowInChild"></span><span class="preInChild" v-text="preInChild"></span>
    </div>


    <div class="in2">
      <div id="main2" class="main2"></div>
    </div>

    <div class="menu2">
      <span v-text="currentBorrow"></span><span class="preInChild" v-text="yesterdayBorrow"></span>
    </div>

    <div class="newBook">
      <div class="newBook1">
        <div class="demo">
          <vue3ScrollSeamless
              class="scroll-wrap"
              :classOptions="classOptions"
              :dataList="newBook1"
          >
            <ul>
              <li v-for="item in newBook1">
                {{ item }}
              </li>

            </ul>
          </vue3ScrollSeamless>
        </div>
      </div>
      <div class="newBook2">
        <div class="demo">
          <vue3ScrollSeamless
              class="scroll-wrap"
              :classOptions="classOptions"
              :dataList="newBook2"
          >
        <ul>
          <li v-for="item in newBook2">
            {{ item }}
          </li>

        </ul>
          </vue3ScrollSeamless>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.root {
  position: absolute;
  width: 1080px;
  height: 1920px;
  left: 0;
  top: 0;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
  box-sizing: border-box;
  background: url(./assets/background.jpg);
}

.weather {
  width: 100%;
  height: 115px;
  /* background-color: antiquewhite; */
  padding-top: 20px;
  padding-left: 30px;
  box-sizing: border-box;
  text-align: left;
  font-size: 25px;
  color: white;
  /* font-family: JDZY; */
}

.time {
  font-weight: bold;
  font-size: 40px;
}

.time2 {
  height: 20px;
}

/* @font-face {
  font-family: "JDZY";
  src: url(./assets/font/AlimamaDaoLiTi.woff);
  font-weight: normal;
  font-style: normal;
} */

.title {
  text-align: left;
  font-size: 50px;
  /* font-family: JDZY; */
  font-weight: bold;
  color: darkred;
  margin-left: 180px;
  margin-top: 28px;
}

.in {
  width: 90%;
  height: 280px;
  /* background-color: aqua; */
  margin-top: 130px;
  margin-left: 54px;
}

.menu {
  /* background-color: aquamarine; */
  width: 90%;
  height: 60px;
  margin-top: 35px;
  margin-left: 54px;
  padding-left: 320px;
  padding-top: 19px;
  text-align: left;

}

.menu2 {
  /* background-color: aquamarine; */
  width: 90%;
  height: 60px;
  margin-top: 35px;
  margin-left: 54px;
  padding-left: 320px;
  padding-top: 13px;
  text-align: left;

}

.preInChild {
  margin-left: 207px;
}

.in2 {
  width: 90%;
  height: 280px;
  /* background-color: aqua; */
  margin-top: 155px;
  margin-left: 54px;
}

.main {
  width: 100%;
  height: 100%;
  /* background-color: bisque; */
}

.main2 {
  width: 100%;
  height: 100%;
  /* background-color: bisque; */
}

.newBook {
  width: 100%;
  height: 500px;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 创建两列，每列占据可用空间的一半 */
  /* background-color: aqua; */
}

.newBook1 {
  width: 455px;
  height: 330px;
  position: relative;
  left: 75px;
  top: 220px;
  /* background-color: aquamarine; */
  text-align: left;
  font-size: 20px;
  font-weight: bold;
}
.newBook2 {
  width: 455px;
  height: 330px;
  position: relative;
  left: 0px;
  top: 220px;
  /* background-color: aquamarine; */
  text-align: left;
  font-size: 20px;
  font-weight: bold;

}


.scroll-wrap {
height: 270px;
  margin: 0 auto;
  overflow: hidden;
}
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
